<template>
    <div class="ApplyBuddy">
        <h2>好友申请管理</h2><button data-text @click="Back">返回</button>
        <div class="ApplyBuddyBox">
            <div class="ApplyBuddyBoxPrimary">
                <div class="ApplyBuddyBoxPrimaryHeader" @click="FlagPrimayActive">
                    <img src="../../assets/SVG/Left.svg" alt="" v-if="!FlagPrimay">
                    <img src="../../assets/SVG/bottom.svg" alt="" v-else-if="FlagPrimay">
                    <span>申请管理</span>
                </div>
                <div v-if="FlagPrimay">
                    <div v-if="ApplyListPrimary.length > 0" class="grid grid_cor3">
                        <div v-for="item in ApplyListPrimary" :key="item.userId" class="AddBuddyBoxChildren">
                            <p>昵称：{{ item.userNickname }}</p>
                            <p>邮箱：<span v-html="item.userMailbox"></span></p>
                            <p>注册年龄：{{ item.userTime }}</p>
                            <div class="AddBuddyBoxChildrenFilex">
                                <span v-if="item.userId == '1'">
                                    等待对方同意
                                </span>
                                <span v-if="item.userId == '2'">
                                    对方已同意
                                </span>
                                <span v-if="item.userId == '3'">
                                    对方拒绝
                                </span>
                            </div>
                        </div>
                    </div>
                    <div v-else class="ApplyBuddyBoxPrimaryContent">
                        <Zky_Error class="ApplyBuddyBoxPrimaryHeaderError"></Zky_Error>
                    </div>
                </div>
            </div>
            <div class="ApplyBuddyBoxPrimary">
                <div class="ApplyBuddyBoxPrimaryHeader" @click="FlagOtherActive">
                    <img src="../../assets/SVG/Left.svg" alt="" v-if="!FlagOther">
                    <img src="../../assets/SVG/bottom.svg" alt="" v-else-if="FlagOther">
                    <span>添加管理</span>
                </div>
                <div v-if="FlagOther">
                    <div v-if="ApplyListother.length > 0" class="grid grid_cor3">
                        <div v-for="item in ApplyListother" :key="item.userId" class="AddBuddyBoxChildren">
                            <p>昵称：{{ item.userNickname }}</p>
                            <p>邮箱：<span v-html="item.userMailbox"></span></p>
                            <p>注册年龄：{{ item.userTime }}</p>
                            <div v-if="item.userId == '1'">
                                <button @click="ApplyListotherOk(item)">同意</button>
                                <button @click="ApplyListotherStop(item)" data-error style="margin-left: 20px;">拒绝</button>
                            </div>
                            <div class="AddBuddyBoxChildrenFilex" v-if="item.userId != '1'">
                                <span v-if="item.userId == '2'">
                                    同意好友申请
                                </span>
                                <span v-if="item.userId == '3'">
                                    拒绝好友申请
                                </span>
                            </div>
                        </div>
                    </div>
                    <div v-else class="ApplyBuddyBoxPrimaryContent">
                        <Zky_Error class="ApplyBuddyBoxPrimaryHeaderError"></Zky_Error>
                    </div>
                </div>
            </div>
        </div>
        <div>

            <div>
                <Zky_Popup v-model:hidden="hidden" :title="'选择分组'" :Confirm="Confirm">
                    <a-form :model="BuddyList" :rules="rules" ref="BuddyDom">
                        <a-form-item label="分组名称" name="userMailboxType" v-if="GroupList.length <= 0">
                            <a-input placeholder="请输入分组名" v-model:value="BuddyList.userMailboxType"></a-input>
                        </a-form-item>
                        <a-form-item label="分组" name="userMailboxType" v-else>
                            <a-select v-model:value="BuddyList.userMailboxType">
                                <a-select-option v-for="item in GroupList" :key="item.groupId" :value="item.groupId">{{
                                    item.groupName }}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-form>
                </Zky_Popup>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue"
import { useRouter } from "vue-router";
import { TimeLength } from "../../utils/Time";
import { main } from "../../store";
const Mains = main()
Mains.Home = 1
Mains.Buddy = 2
const router = useRouter()
const FlagPrimay = ref(false)
const FlagOther = ref(false)
const hidden = ref(false)
const BuddyDom = ref()

const GroupList = ref([{
    groupName: "",
    groupId: ""
}])
const ApplyListPrimary = ref([
    {
        userId: "",
        userNickname: "",
        userMailbox: "",
        userTime: "",
        userMailboxType: ""
    }
])
const ApplyListother = ref([{
    userId: "",
    userNickname: "",
    userMailbox: "",
    userTime: "",
    userMailboxType: ""
}])
const BuddyList = ref({
    buddyOthersId: "",
    buddyOneselfId: "",
    buddyGroup: "",
    userMailboxType: "",
    userMailbox: ""
})
const rules = {
    buddyOneselfId: [{
        required: true, message: "请填写分组", trigger: "blur"
    },
    {
        min: 2, max: 6, message: "分组名长度再2-6之间", trigger: "blur"
    }, {
        pattern: /^[\u4e00-\u9fa5]{0,}$/, message: "分组名只是支持中文", trigger: "blur"
    }],
    userMailboxType: [{
        required: true, message: "请选择分组", trigger: "blur"
    }]
}
import Axios from "../../Axios/Axios";
import { message } from "ant-design-vue";
onMounted(async () => {
    await init()
})
const Confirm = async () => {
    BuddyDom.value.validate().then(async () => {
        const res = await Axios("AwaitConfirm", BuddyList.value)
        if (res.code == 200) {
            await init()
            message.success(res.message)
            hidden.value = false
        } else {
            message.warning(res.message)
        }

    })
}
// 点击同意按钮
const ApplyListotherOk = async (obj: any) => {
    // obj.userTime = new Date()
    BuddyList.value.userMailbox = obj.userMailbox
    await groupList()
    if (GroupList.value.length > 0) {
        hidden.value = true
    } else {
        message.warning("您还没有分组，请创建分组之后再同意")
    }

}
// 查询当前分组
const groupList = async () => {
    const res = await Axios("GroupSelectMailbox")

    if (res.code == 200) {
        GroupList.value = res.data
    }

}

// 点击同意按钮
const ApplyListotherStop = async (obj: any) => {
    obj.userTime = new Date()

    const res = await Axios("AwaitUpdateState", { awaitSecondary: obj.userMailbox })
    if (res.code == 200) {
        message.success(res.message)
        init()
    } else {
        message.warning(res.message)
    }
}

// 返回
const Back = () => {
    router.go(-1)
}
const FlagPrimayActive = () => {
    FlagPrimay.value = !FlagPrimay.value
}
const FlagOtherActive = () => {
    FlagOther.value = !FlagOther.value
}

// 获取初始数据
const init = async () => {
    ApplyListPrimary.value = []
    ApplyListother.value = []
    const res = await Axios("ApplyBuddyInformation")
    if (res.code == 200) {
        console.log(res.data);
        if (res.data.length > 0) {
            if (res.data.length > 0) {
                res.data.forEach((el: any) => {
                    el.userTime = <string>TimeLength(new Date(el.userTime))
                });
            }
            ApplyListPrimary.value = res.data.filter((el: any) => { return el.userMailboxType == "1" })
            ApplyListother.value = res.data.filter((el: any) => { return el.userMailboxType == "2" })

        }

    }
}

</script>

<style scoped lang="scss">
.ApplyBuddy {
    h2 {
        display: inline-block;
    }
}

.ApplyBuddyBoxPrimaryHeader {
    cursor: pointer;
    margin-bottom: 20px;

    img {
        width: 20px;
        margin-right: 10px;
    }
}

.ApplyBuddyBoxPrimaryHeaderError {
    width: 30%;
}

.AddBuddyBoxChildren {
    margin-bottom: 20px;
    background: #fff;
    padding: 20px;
    box-shadow: 1px 1px 9px 1px rgba($color: #000000, $alpha: 0.6);
    position: relative;

    .AddBuddyBoxChildrenFilex {
        display: inline-block;
        position: absolute;
        right: 40px;
        top: 16px;
        writing-mode: vertical-rl;
        border: 1px solid #4983e1;
        border-radius: 8px;
        color: #4983e1;
        padding: 10px;
        letter-spacing: 2px;

    }
}
</style>